<template>
	<div class="myTabbarWrap">
        <slot></slot>
	</div>
</template>
<script type="text/javascript">
	export default{
		props:{
			value:Number
		},
		data () {
			return {
				index:0
			}
		},
		mounted (){
			this.$children.forEach((item, index) => {
				item.active = (index === 0)
				item.$on('click', () => {
					this.handleClick(index)
				})
			})
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			handleClick(index) {
				this.$children.forEach((item, i) => {
					item.active = (i === index);
					item.nowPrevIndex = (i === index-1);
				})
				this.$emit("input",index);
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.myTabbarWrap{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		box-sizing: content-box;
		height: 42px;
		background-color: #A1C7FF;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
    }
</style>